<template>
	<view class="content">
		<!-- <u-navbar :border-bottom="false" title="举报职位"></u-navbar> -->
		<view class="content_main">
			<!-- 举报原因 -->
			<view class="content_main_item">
				<view class="u-font-32 u-font-weight">举报原因</view>
				<view class="u-flex u-flex-wrap u-m-t-28">
					<view class="content_main_item--ls"
						:class="data.current == item.id ? 'content_main_item--active' : ''" v-for="item in data.list"
						:key="item.id" @click="click(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 备注说明 -->
			<view class="content_main_item">
				<view class="u-font-32 u-font-weight">备注说明（必填）</view>
				<u-input class="u-m-t-12" v-model="data.value" type="textarea" :border="true" height="300" :adjust-position="false"
					:auto-height="true" :placeholder="data.placeholder" maxlength="200" />
			</view>
		</view>

		<u-modal v-model="data.isReport" content="感谢您的举报，我们将会尽快核 实并向您做出反馈。" title="提交成功" @confirm="confirm"></u-modal>
		<u-bottom-button confirmText="提交" @confirm="submit"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '/stores/userInfo'
	import {storeToRefs} from 'pinia'
	const data = reactive({
		id: '',
		value: '',
		placeholder: '请简要描述您的问题，以便我们尽快核实解决',
		list: [],
		current: 0,
		isReport: false
	})
	const {
		isLogin
	} = storeToRefs(useUserStore())
	onLoad((id) => {
		data.id = id
		getTipoffJob()
	})
	// 获取举报原因列表
	const getTipoffJob = async () => {
		let params = {
			type: 'tipoffJob'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		data.list = res
	}
	// 点击选中举报原因
	const click = (id) => {
		if (data.current == id) return data.current = 0
		data.current = id
	}
	// 确定事件
	const confirm = () => {
		uni.$u.route({
			type: 'back'
		})
	}
	// 举报提交
	const submit = async () => {
		if(!isLogin.value) return uni.$u.route('/pages/login/login')
		if (data.current == 0) return uni.$u.toast('请选择举报原因')
		if (uni.$u.test.isEmpty(data.value)) return uni.$u.toast('请填写备注说明')
		let params = {
			target_id: data.id,
			type: 1,
			reason: data.current,
			content: data.value
		}
		let res = await uni.$u.api.getTipoff(params)
		if (res) return data.isReport = true
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.content {
		color: #101010;

		&_main {
			margin-top: 36rpx;
			padding: 0 32rpx;

			&_item {
				background-color: #fff;
				margin-bottom: 32rpx;
				padding: 36rpx;

				&--ls {
					background-color: #fff;
					border: 1px solid #bebaba;
					margin-right: 30rpx;
					margin-bottom: 18rpx;
					padding: 14rpx 20rpx;
					font-size: 24rpx;
				}

				&--active {
					background-color: #fff;
					border: 1px solid #00D075;
					color: #00D075;
				}
			}
		}
	}
</style>